<template>
  <el-dialog
    :title="formTitle"
    :visible.sync="addDialogVisible"
    width="40%"
    :close-on-click-modal="false"
    @close="addDialogClosed"
  >
    <!-- 内容主题区 -->
    <el-form
      style="padding:0 80px"
      :model="addForm"
      :rules="addFormRules"
      ref="addFormRef"
      label-width="90px"
    >
      <el-form-item label="模板名称" prop="name">
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item label="模板分组" prop="groupId">
        <el-select clearable
          v-model="addForm.groupId"
          filterable
          placeholder="请选择模板分组"
        >
          <el-option
            v-for="(item, index) in groupList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="链接模板">
        <el-select
          v-model="addForm.templateIds"
          filterable
          multiple
          placeholder="请选择链接模板"
        >
          <el-option
            v-for="(item, index) in templateList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="监控项">
        <el-select clearable v-model="items" filterable placeholder="请选择监控项">
          <el-option
            v-for="(item, index) in itemList"
            :key="index"
            :label="item.itemName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <div class="itemConfigBox" v-if="items">
        <el-form
          :model="itemForm"
          :rules="itemFormRules"
          ref="itemFormRef"
          label-width="90px"
        >
          <el-form-item label="间隔" prop="delay">
            <el-input v-model="itemForm.delay"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-form>
    <!-- 底部区 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script type="text/javascript">
/*
 * @author 宋辉辉
 * @description 模板的创建/编辑模态框
 * @api /template
 * @since 2021年11月2日15:06
 * @update 2021年11月2日15:06:17
 * @modifier 宋辉辉
 * @bug 无
 * @version v1.0.0
 */
import { doAdd, doEdit, getAll } from '@/api/monitor/config/template'
//引入分组的getAll 接口
//引入的模板的getAll 接口 ps:要排除自身
//引入监控项的getAll 接口
export default {
  name: 'templateAdd',
  data() {
    return {
      items: '',
      formTitle: '添加模板',
      addDialogVisible: false,
      addForm: {
        name: '',
        groupId: '',
        templateIds: []
      },
      a: {
        nodeList: [
          {
            code: '0',
            name: '金水区机房',
            info: {
              id: '1',
              name: '金水区机房'
            }
          },
          { code: '1', name: '#01机柜' },
          { code: '2', name: '#02机柜' },
          { code: '3', name: '827IBTK' }
        ],
        nodeRelation: [
          {
            form: '0',
            to: '1',
            relation: {
              type: 0,
              title: '安装'
            }
          },
          {
            form: '0',
            to: '2',
            relation: {
              type: 0,
              title: '安装'
            }
          },
          {
            form: '1',
            to: '3',
            relation: {
              type: 1,
              title: '架设'
            }
          }
        ]
      },
      itemForm: {
        delay: ''
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入模板名称', trigger: 'blur' },
          { min: 3, max: 20, message: '主机名的长度在3-20个字符之间', trigger: 'blur' }
        ],
        groupId: [
          { required: true, message: '请输入模板分组', trigger: 'change' }
        ]
      },
      itemFormRules: {
        delay: [
          { required: true, message: '请输入监控间隔时间', trigger: 'blur' }
        ]
      },
      groupList: [
        {
          name: '分组1',
          id: 0
        },
        {
          name: '分组2',
          id: 1
        }
      ],
      templateList: [
        {
          id: 0,
          name: 'Windows监控模板',
          groupId: 0,
          items: 10,
          templates: [
            'CPU监控模板',
            '内存监控模板',
            '硬盘监控模板',
            '应用监控模板'
          ],
          readOnly: true
        },
        {
          id: 1,
          name: 'Lunix监控模板',
          groupId: 1,
          items: 30,
          templates: [
            'CPU监控模板',
            '内存监控模板',
            '硬盘监控模板',
            '应用监控模板'
          ],
          readOnly: true
        },
        {
          id: 2,
          name: '同多优监控模板',
          groupId: 0,
          items: 30,
          templates: ['Lunix监控模板'],
          readOnly: false
        }
      ],
      itemList: [
        {
          id: 0,
          itemName: '监控主机CPU使用率'
        },
        {
          id: 1,
          itemName: '监控主机内存占用率'
        },
        {
          id: 2,
          itemName: '监控主机磁盘使用率'
        },
        {
          id: 3,
          itemName: '监控主机网络上行下行'
        }
      ]
    }
  },
  methods: {
    save() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        if (this.addForm.id) {
          await doEdit(this.addForm)
        } else {
          await doAdd(this.addForm)
        }
        this.addDialogClosed()
      })
    },
    addDialogClosed() {
      this.addForm = this.$options.data().addForm
      this.$emit('init', '')
      this.addDialogVisible = false
      this.$refs.addFormRef.resetFields()
    },
    edit(row) {
      if (!row.id) {
        this.formTitle = '添加模板'
      } else {
        this.formTitle = '修改模板'
        this.addForm = Object.assign({}, row)
      }
      this.addDialogVisible = true
    }
  }
}
</script>

<style scoped>
.itemConfigBox {
  border: 1px solid #f5f5f5;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  width: 100%;
  height: 260px;
}
</style>